/*
显示指定用户列表的UI组件
 */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { WingBlank, WhiteSpace, Card } from "antd-mobile";
import { Descriptions } from "antd";
import { withRouter } from "react-router-dom";
import QueueAnim from "rc-queue-anim";
const Header = Card.Header;
const Body = Card.Body;

class UserList extends Component {
  static propTypes = {
    userList: PropTypes.array.isRequired,
  };
  render() {
    const { userList } = this.props;

    return (
      <WingBlank style={{ marginBottom: 50, marginTop: 50 }}>
        <QueueAnim type="scale">
          {userList.map((user) => (
            <div key={user._id}>
              <WhiteSpace />
              <Card
                onClick={() => this.props.history.push(`/chat/${user._id}`)}
              >
                <Header
                  thumb={require(`../../assets/images/${user.header}.png`)}
                  extra={user.username}
                />
                <Body>
                  <Descriptions>
                  <Descriptions.Item label="职位">
                  {user.post}
                  </Descriptions.Item>
                  {user.company ?<Descriptions.Item label="公司">
                  {user.company}
                  </Descriptions.Item>:null}
                  {user.salary ?<Descriptions.Item label="月薪">
                  {user.salary}
                  </Descriptions.Item>:null}
                  <Descriptions.Item label="描述">
                  {user.info}
                  </Descriptions.Item>
                  </Descriptions>
                </Body>
              </Card>
            </div>
          ))}
        </QueueAnim>
      </WingBlank>
    );
  }
}

export default withRouter(UserList);
